<template >
    <div class="sdy-goods-list">
        <SdyHeader title="啥都有-商品列表页" back></SdyHeader>
        <van-card
            v-for="item in goodsList"
            :key="item.proid"
            num="10"
           :price="item.originprice"
            :desc="item.desc"
            :title="item.proname"
            :thumb="item.img1">
        
        <template #footer>
            <van-button size="mini" type="warning" @click="goToDetail(item.proid)">查看详情</van-button>
            <van-button size="mini" type="danger" @click="addCart(item.proid)">加入购物车</van-button>
        </template>
        </van-card>
    </div>
</template>
<script setup lang="ts">
// 只要来过一次这个页面就相当于一次搜索
// 就需要拿到带过来的信息，存储在localStorage里面
import {useRoute,useRouter, type RouteLocationNormalizedLoaded, type Router} from 'vue-router'
import { onMounted ,ref} from 'vue'
import { searchListApi } from '@/api/goods'
import type { MyHotItem} from '@/config/interface'
import {addCartApi} from '@/api/cart'
import { Toast } from 'vant';
const $route:RouteLocationNormalizedLoaded =useRoute()
const $router:Router=useRouter()
// 准备一个函数拿到搜索带过来的信息存储在localStorage内
const setLocalStorage =(text:string):void =>{
    const historyList:string[]=JSON.parse(window.localStorage.getItem('history')as string)||[]

// 把 text 追加到数组内, 然后重新存储回 localStorage 内
// 如果历史记录内有和这个信息了, 不需要插入了
const res:boolean =historyList.indexOf(text) !==-1
if(res)return 
// 代码来到这说明历史记录内没有记录过该信息需要存储
historyList.push(text)
// 再把最新的数组存储到loaclStorage里面
window.localStorage.setItem('history',JSON.stringify(historyList))
}
// 准备一个数据表示当前第几页
const count =ref<number>(1)
// 准备一个数据来表示页面渲染数组
const goodsList = ref< MyHotItem[]>([])
//根据关键字请求当前页面的数据
// 需要用到携带过来的关键字
const getGoodsList =async(text:string) =>{
    const res=await searchListApi(text,count.value)
    goodsList.value =res.data    
}
// 跳转到详情页
const goToDetail =(id:string)=>{
$router.push({path:'/detail',query:{proid:id}})
}
// 跳转到购物车
const addCart = async(id:string)=>{
//  根据id请求接口数据，加入购物车，获取一次用户id和token（为了验证有没有）
const user_id =window.localStorage.getItem('user_id')
const token =window.localStorage.getItem('token')
if(!user_id||!token){
    Toast('您还没有登录');
    return
    // 你还没用登陆
}
// 代码执行到这里说明有，但不一定对，要请求查看一下
const res = await addCartApi(user_id,id)
console.log(res);

}
onMounted(()=>{
    const searchText = $route.query.search
    searchText && setLocalStorage(searchText as string)
    searchText && getGoodsList(searchText as string)
})
</script>
<style scoped lang="scss">
.sdy-goods-list{
    height: 100%;
    overflow-y: auto;
}
</style>